<template>
  <div class="purchase-return">
    <!-- 顶部表单区（静态展示） -->
    <div class="top-bar">
      <el-form inline class="core-form">
        <el-form-item label="*供应商">
          <span>{{ form.supplier }}</span>
        </el-form-item>
        <el-form-item label="业务员">
          <span>{{ form.salesman }}</span>
        </el-form-item>
        <el-form-item label="单据日期">
          <span>{{ form.documentDate }}</span>
        </el-form-item>
        <el-form-item label="供应商发货地址">
          <span>{{ form.shippingAddr }}</span>
        </el-form-item>
        <el-form-item>
          <span class="biz-type">购货退货单录入</span>
        </el-form-item>
        <el-form-item>
          <el-button type="text" @click="uploadFile">
            <el-icon class="mr-2"><Upload /></el-icon>上传附件
          </el-button>
        </el-form-item>
        <el-form-item>
          <div class="doc-info">
            单据编号: {{ form.docNo }}
            <el-icon class="copy-icon" @click="copyDocNo"
              ><CopyDocument
            /></el-icon>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <!-- 商品表格区（5条模拟数据） -->
    <div class="table-wrap">
      <el-table
        :data="tableData"
        border
        show-summary
        :summary-method="calcSummary"
        :header-cell-style="{ background: '#F8F9FA' }"
      >
        <el-table-column type="selection" width="50" />

        <!-- 商品列（静态展示） -->
        <el-table-column label="*商品 -- 扫描枪录入" width="350">
          <template #default="scope">
            <div class="product-cell">
              <span>{{ scope.row.name }}</span>
              <div class="img-box">
                <el-image
                  v-if="scope.row.image"
                  :src="scope.row.image"
                  style="width: 40px; height: 40px"
                  fit="cover"
                />
                <span v-else class="no-img">无图</span>
              </div>
            </div>
          </template>
        </el-table-column>

        <!-- 基础信息列（静态展示） -->
        <el-table-column label="商品图片" width="80">
          <template #default="scope">
            <div class="img-box">
              <el-image
                v-if="scope.row.image"
                :src="scope.row.image"
                style="width: 40px; height: 40px"
                fit="cover"
              />
              <span v-else class="no-img">无图</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="品牌" width="120">
          <template #default="scope">
            <span>{{ scope.row.brand }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品备注" width="150">
          <template #default="scope">
            <span>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
        <el-table-column label="属性" width="120">
          <template #default="scope">
            <span>{{ scope.row.attr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单位" width="100">
          <template #default="scope">
            <span>{{ scope.row.unit }}</span>
          </template>
        </el-table-column>

        <!-- 仓库列（静态展示） -->
        <el-table-column label="*仓库" width="150">
          <template #default="scope">
            <span>{{ scope.row.warehouse }}</span>
          </template>
        </el-table-column>

        <!-- 库存与数量（静态展示） -->
        <el-table-column label="可用库存" width="120">
          <template #header>
            <el-tooltip content="库存说明" placement="top">
              <span
                >可用库存 <el-icon class="info-icon"><Question /></el-icon
              ></span>
            </el-tooltip>
          </template>
          <template #default="scope">
            <span>{{ scope.row.stock }}</span>
          </template>
        </el-table-column>
        <el-table-column label="可退数量" width="120">
          <template #default="scope">
            <span>{{ scope.row.returnQty }}</span>
          </template>
        </el-table-column>
        <el-table-column label="*数量" width="140">
          <template #default="scope">
            <span>{{ scope.row.qty }}</span>
          </template>
        </el-table-column>
        <el-table-column label="整件散包" width="120">
          <template #default="scope">
            <span>{{ scope.row.packageType }}</span>
          </template>
        </el-table-column>

        <!-- 价格折扣列（静态展示） -->
        <el-table-column label="基本单位" width="120">
          <template #default="scope">
            <span>{{ scope.row.baseUnit }}</span>
          </template>
        </el-table-column>
        <el-table-column label="基本数量" width="120">
          <template #default="scope">
            <span>{{ scope.row.baseQty }}</span>
          </template>
        </el-table-column>
        <el-table-column label="购货单价" width="140">
          <template #default="scope">
            <span>{{ scope.row.purchasePrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="赠品" width="80">
          <template #default="scope">
            <span>{{ scope.row.isGift ? "是" : "否" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="含税单价" width="140">
          <template #default="scope">
            <span>{{ scope.row.taxPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="折后含税单价" width="140">
          <template #default="scope">
            <span>{{ scope.row.discountedTaxPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="折扣率(%)" width="140">
          <template #default="scope">
            <span>{{ scope.row.discountRate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="折扣(折)" width="140">
          <template #default="scope">
            <span>{{ scope.row.discount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="折扣额" width="140">
          <template #default="scope">
            <span>{{ scope.row.discountAmt }}</span>
          </template>
        </el-table-column>
        <el-table-column label="折后单价" width="140">
          <template #default="scope">
            <span>{{ scope.row.discountedPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="金额" width="140">
          <template #default="scope">
            <span>{{ scope.row.amount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="税率(%)" width="140">
          <template #default="scope">
            <span>{{ scope.row.taxRate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="税额" width="140">
          <template #default="scope">
            <span>{{ scope.row.taxAmt }}</span>
          </template>
        </el-table-column>
        <el-table-column label="价税合计" width="140">
          <template #default="scope">
            <span>{{ scope.row.totalAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="采购费用" width="140">
          <template #default="scope">
            <span>{{ scope.row.purchaseCost }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" width="160">
          <template #default="scope">
            <span>{{ scope.row.note }}</span>
          </template>
        </el-table-column>
        <el-table-column label="关联购货订单号" width="160">
          <template #default="scope">
            <span>{{ scope.row.relatedOrder }}</span>
          </template>
        </el-table-column>
        <el-table-column label="源购货单号" width="160">
          <template #default="scope">
            <span>{{ scope.row.sourceOrder }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 底部信息区（关联5条数据的合计值） -->
    <div class="bottom-bar">
      <el-form inline class="info-form">
        <el-form-item label="优惠率:">
          <span>{{ form.discountRate }}%</span>
        </el-form-item>
        <el-form-item label="退款优惠:">
          <span>{{ form.refundDiscount }}</span>
        </el-form-item>
        <el-form-item label="优惠后金额:">
          <span class="read-only">{{ form.discountedAmount }}</span>
        </el-form-item>
        <el-form-item label="本次退款:">
          <span>{{ form.currentRefund }}</span>
        </el-form-item>
        <el-form-item label="结算账户:">
          <span>{{ form.settlementAcc }}</span>
        </el-form-item>
        <el-form-item label="本次欠款:">
          <span class="read-only">{{ form.currentDebt }}</span>
        </el-form-item>
        <el-form-item label="总欠款:">
          <span class="read-only">{{ form.totalDebt }}</span>
        </el-form-item>
        <el-form-item label="采购费用:">
          <div class="flex-center">
            <span>{{ form.purchaseCost }}</span>
            <a href="#" class="cost-link">采购销售费用清单</a>
          </div>
        </el-form-item>
        <el-form-item label="交货方式:">
          <span>{{ form.deliveryMode }}</span>
        </el-form-item>
      </el-form>

      <div class="action-group">
        <a href="#" class="custom-field">自定义字段</a>
        <el-button type="text" @click="viewHistory">历史单据</el-button>
        <el-button type="text" @click="viewLog">操作日志</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Upload, CopyDocument, Question } from "@element-plus/icons-vue";

export default {
  name: "PurchaseReturn",
  components: { Upload, CopyDocument, Question },
  data() {
    return {
      form: {
        supplier: "杭州示例贸易有限公司",
        salesman: "张三",
        documentDate: "2025-06-24",
        shippingAddr: "杭州市西湖区XX路123号",
        docNo: "GHT20250624001",
        discountRate: 5, // 整体优惠率
        refundDiscount: 500, // 退款优惠金额
        discountedAmount: 34902.9, // 5条数据价税合计 - 退款优惠
        currentRefund: 10000, // 本次实际退款
        settlementAcc: "1002 工商银行(123456)",
        currentDebt: 25402.9, // 总欠款 - 本次退款
        totalDebt: 35402.9, // 5条数据价税合计总和
        purchaseCost: 260, // 5条数据采购费用总和
        deliveryMode: "顺丰物流(到付)",
      },
      tableData: [
        // 商品A：基础款，主仓库，5%折扣
        {
          name: "示例商品A",
          image: "",
          brand: "品牌A",
          remark: "无备注",
          attr: "标准款",
          unit: "件",
          warehouse: "主仓库",
          stock: 100,
          returnQty: 50,
          qty: 50,
          packageType: "整件",
          baseUnit: "箱",
          baseQty: 10,
          purchasePrice: 100,
          isGift: false,
          taxPrice: 113, // 100 * 1.13（13%税）
          discountedTaxPrice: 107.35, // 113 * 0.95（5%折扣）
          discountRate: 5,
          discount: 9.5,
          discountAmt: 5.65, // 113 - 107.35
          discountedPrice: 107.35,
          amount: 5367.5, // 107.35 * 50
          taxRate: 13,
          taxAmt: 697.78, // 5367.5 * 0.13
          totalAmount: 6065.28, // 5367.5 + 697.78
          purchaseCost: 50,
          note: "无备注",
          relatedOrder: "ORD20250601",
          sourceOrder: "SRC20250601",
        },
        // 商品B：豪华款，主仓库，5%折扣
        {
          name: "示例商品B",
          image: "",
          brand: "品牌B",
          remark: "无备注",
          attr: "豪华款",
          unit: "台",
          warehouse: "主仓库",
          stock: 80,
          returnQty: 40,
          qty: 40,
          packageType: "散包",
          baseUnit: "箱",
          baseQty: 5,
          purchasePrice: 200,
          isGift: false,
          taxPrice: 226, // 200 * 1.13
          discountedTaxPrice: 214.7, // 226 * 0.95
          discountRate: 5,
          discount: 9.5,
          discountAmt: 11.3,
          discountedPrice: 214.7,
          amount: 8588, // 214.7 * 40
          taxRate: 13,
          taxAmt: 1116.44,
          totalAmount: 9704.44,
          purchaseCost: 80,
          note: "无备注",
          relatedOrder: "ORD20250602",
          sourceOrder: "SRC20250602",
        },
        // 商品C：赠品，副仓库，0%折扣
        {
          name: "示例商品C",
          image: "",
          brand: "品牌C",
          remark: "赠品",
          attr: "基础款",
          unit: "套",
          warehouse: "副仓库",
          stock: 150,
          returnQty: 70,
          qty: 70,
          packageType: "整件",
          baseUnit: "箱",
          baseQty: 15,
          purchasePrice: 50,
          isGift: true,
          taxPrice: 56.5, // 50 * 1.13
          discountedTaxPrice: 56.5, // 赠品无折扣
          discountRate: 0,
          discount: 10,
          discountAmt: 0,
          discountedPrice: 56.5,
          amount: 3955, // 56.5 * 70
          taxRate: 13,
          taxAmt: 514.15,
          totalAmount: 4469.15,
          purchaseCost: 30,
          note: "赠品",
          relatedOrder: "ORD20250603",
          sourceOrder: "SRC20250603",
        },
        // 商品D：定制款，主仓库，5%折扣
        {
          name: "示例商品D",
          image: "",
          brand: "品牌D",
          remark: "无备注",
          attr: "定制款",
          unit: "个",
          warehouse: "主仓库",
          stock: 200,
          returnQty: 100,
          qty: 100,
          packageType: "散包",
          baseUnit: "箱",
          baseQty: 20,
          purchasePrice: 80,
          isGift: false,
          taxPrice: 90.4, // 80 * 1.13
          discountedTaxPrice: 85.88, // 90.4 * 0.95
          discountRate: 5,
          discount: 9.5,
          discountAmt: 4.52,
          discountedPrice: 85.88,
          amount: 8588, // 85.88 * 100
          taxRate: 13,
          taxAmt: 1116.44,
          totalAmount: 9704.44,
          purchaseCost: 60,
          note: "无备注",
          relatedOrder: "ORD20250604",
          sourceOrder: "SRC20250604",
        },
        // 商品E：普通款，副仓库，5%折扣
        {
          name: "示例商品E",
          image: "",
          brand: "品牌E",
          remark: "无备注",
          attr: "普通款",
          unit: "kg",
          warehouse: "副仓库",
          stock: 300,
          returnQty: 150,
          qty: 150,
          packageType: "整件",
          baseUnit: "箱",
          baseQty: 30,
          purchasePrice: 30,
          isGift: false,
          taxPrice: 33.9, // 30 * 1.13
          discountedTaxPrice: 32.21, // 33.9 * 0.95
          discountRate: 5,
          discount: 9.5,
          discountAmt: 1.69,
          discountedPrice: 32.21,
          amount: 4831.5, // 32.21 * 150
          taxRate: 13,
          taxAmt: 628.09,
          totalAmount: 5459.59,
          purchaseCost: 40,
          note: "无备注",
          relatedOrder: "ORD20250605",
          sourceOrder: "SRC20250605",
        },
      ],
    };
  },
  computed: {
    // 保持计算逻辑（若需动态计算，可移除form中的硬编码值）
    discountedAmount() {
      const total = this.tableData.reduce(
        (acc, item) => acc + (item.totalAmount || 0),
        0
      );
      return total - this.form.refundDiscount;
    },
    currentDebt() {
      return this.form.totalDebt - this.form.currentRefund;
    },
  },
  methods: {
    uploadFile() {
      console.log("查看附件");
    },
    copyDocNo() {
      navigator.clipboard.writeText(this.form.docNo);
      this.$message.success("单据编号已复制");
    },
    calcSummary({ columns, data }) {
      const sums = [];
      columns.forEach((col, i) => {
        if (i === 0) {
          sums[i] = "合计:";
          return;
        }
        const prop = col.prop;
        if (prop === "qty") {
          sums[i] = data.reduce((acc, cur) => acc + (cur.qty || 0), 0);
        } else if (prop === "totalAmount") {
          sums[i] = data.reduce((acc, cur) => acc + (cur.totalAmount || 0), 0);
        } else if (prop === "amount") {
          sums[i] = data.reduce((acc, cur) => acc + (cur.amount || 0), 0);
        } else if (prop === "taxAmt") {
          sums[i] = data.reduce((acc, cur) => acc + (cur.taxAmt || 0), 0);
        } else {
          sums[i] = "";
        }
      });
      return sums;
    },
    viewHistory() {
      console.log("查看历史单据");
    },
    viewLog() {
      console.log("查看操作日志");
    },
  },
};
</script>

<style scoped>
.purchase-return {
  padding: 20px;
  background: #fff;
  min-height: calc(100vh - 200px);
}

.top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}
.biz-type {
  color: #666;
}
.doc-info {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #666;
}
.copy-icon {
  color: #409eff;
  cursor: pointer;
}

.table-wrap {
  overflow-x: auto;
  margin: 10px 0;
}
.el-table__footer-row td {
  background: #fff8e1 !important;
}
.product-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.img-box {
  width: 40px;
  height: 40px;
  background: #f5f7fa;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.no-img {
  font-size: 12px;
  color: #999;
}
.flex-center {
  display: flex;
  align-items: center;
  gap: 4px;
}
.info-icon {
  color: #409eff;
  cursor: pointer;
}

.bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 15px;
}
.info-form {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.read-only {
  line-height: 32px;
  font-weight: 500;
  color: #333;
}
.cost-link {
  margin-left: 8px;
  color: #409eff;
  text-decoration: underline;
  cursor: pointer;
}
.action-group {
  display: flex;
  gap: 16px;
}
.custom-field {
  color: #409eff;
  text-decoration: underline;
  cursor: pointer;
}

.el-form-item__label {
  min-width: 70px;
  text-align: right;
}
.el-table th {
  text-align: center;
}
</style>